<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .wrap {
            width: 600px;
            margin: 50px auto;
            text-align: center;
        }

        table {
            width: 600px;
            margin: auto;
            border-collapse: collapse;
            text-align: center;
        }

        table,
        tr,
        td {
            border: 1px solid #333;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <input type="text" id="userName" placeholder="用户名">
        <input type="password" id="password" placeholder="密码"><br>
        <button onclick="addBtn()">增</button>

    </div>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody class="cz"></tbody>
    </table>
    <div class="wrap">
        <input id="xinName" type="text">
        <input id="xinpass" type="text">
        <button id="btn">确定</button>
    </div>
    <script>
        var tbody = document.querySelector("tbody")
        var xinName_inp = document.querySelector("#xinName");
        var xinpass_inp = document.querySelector("#xinpass");
        let list = async () => {
            let res = await fetch(`/list`).then(res => res.json())
            let htmlStr = ""
            res.list.forEach(ele => {
                let tr = `
                <tr>
                    <td>${ele.Id}</td>
                    <td>${ele.userName}</td>
                    <td>${ele.password}</td>
                    <td>
                        <button class="s">删</button>
                        <button class="g">改</button>
                    </td>
                </tr>
                `
                htmlStr += tr
            });
            
            tbody.innerHTML += htmlStr
        }
        list()
        let addBtn = async () => {
            let res = await fetch(`/add?userName=${userName.value}&password=${password.value}`)
            console.log("数据", res);
            list()
        }
        var cz = document.querySelector(".cz");
        var xinName, xinpass,hang
        cz.onclick = function (e) {
            let id = e.target.parentNode.parentNode.firstElementChild.innerHTML
            if (e.target.className == "s") {
                delBtn(id)
                list()
            }
            if (e.target.className == "g") {
                xinName = e.target.parentNode.previousElementSibling.previousElementSibling.innerHTML

                xinpass = e.target.parentNode.previousElementSibling.innerHTML

                hang = e.target.parentNode.parentNode
                xinName_inp.value = xinName
                xinpass_inp.value = xinpass
                console.log(xinName, xinpass);
                btn.onclick = function () {
                    changeBtn(id)
                       list()
                    tbody.removeChild(hang)
                }
                
            }
        }
        let delBtn = async (id) => {
            let res = await fetch(`/del?id=${id}`).then(res => res.json())
            console.log("数据", res);
        }

        let changeBtn = async (id) => {
            let res = await fetch(`/change?userName=${xinName_inp.value}&password=${xinpass_inp.value}&id=${id}`).then(res=>res.json())
            console.log("更改成功",res);
        }

    </script>
</body>

</html>